<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app"></div>
    <script src="/js/react.development.js"></script>
    <script src="/js/react-dom.development.js"></script>
    <script src="/js/babel.min.js"></script>
    <script type="text/babel">
      let btnContent = "保存新的代办事项";
      let f1 = function () {
        console.log(111);
        console.log(this);
      };
      // 创建元素
      // JSX的数据绑定为{}  -- 本义是在JSX中穿插JS表达式
      let el = (
        <div className="todolist">
          <h2>待办事项列表</h2>
          <hr />
          <input type="text" />
          <button onClick={f1}>{btnContent}</button>
          <ol>
            <li>吃饭</li>
            <li>睡觉</li>
            <li>打豆豆</li>
          </ol>
        </div>
      );
      // 查找父元素
      let root = document.querySelector("#app");
      root = ReactDOM.createRoot(root);
      //  挂载子元素
      root.render(el);
    </script>
  </body>
</html>
